<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="file" id="input">

  <button id="btn">上传</button>


  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    const input = document.getElementById("input")
    const btn = document.getElementById("btn")
    input.addEventListener("change", handleFileChange)
    btn.addEventListener("click", handleUpload)

    let fileObj = null

    // 去取本地文件
    function handleFileChange(e) {
      console.log(e.target.files);
      const [file] = e.target.files
      fileObj = file
    }
    // 上传文件
    function handleUpload() {
      if (!fileObj) return 
      const chunkList = createChunk(fileObj)
      // console.log(chunkList);
      const chunks = chunkList.map(({file}, index) => {
        return {
          file,
          size: file.size,
          percent: 0,
          chunkName: `${fileObj.name}-${index}`,
          fileName: fileObj.name,
          index
        }
      })
      // 发请求
      uploadChunks(chunks)

    }
    // 切片
    function createChunk(file, size = 5 * 1024 * 1024) {
      const chunkList = []
      let cur = 0
      while(cur < file.size) {
        // slice切
        chunkList.push({file: file.slice(cur, cur + size)})
        cur += size
      }

      return chunkList
    }
  
    // 请求
    function uploadChunks(chunks) {
      // console.log(chunks); // 这个数组中的元素是对象，对象中有Blob类型的文件对象
      const formChunks = chunks.map(({file, fileName, index, chunkName}) => {
        const formData = new FormData()
        formData.append('file', file)
        formData.append('fileName', fileName)
        formData.append('chunkName', chunkName)
        return {formData, index}
      })

      // console.log(formChunks); // 后端能识别得了的类型
      const requestList = formChunks.map(({ formData, index }) => { // 一个一个片段发
        return axios.post('http://localhost:3000/upload', formData, () => {
          console.log(index);  // 进度条
        })
      })

      // console.log(requestList);
      Promise.all(requestList).then(res => {
        console.log(res, '所有的片段都传输成功')
        mergeChunks()
      })
      
    }
  
    // 合并请求
    function mergeChunks(size = 5 * 1024 * 1024) {
      axios.post('http://localhost:3000/merge', {
        fileName: fileObj.name,
        size
      }).then(res => {
        console.log(`${fileObj.name}合并完成`);
      })
    }
  </script>
</body>
</html>